<template>
  <div class="CreditModel">
    <div class="flexC" style="padding:0rem 2.7rem;">
      <div class="flex JustifyContentC" style="padding-top: 0.7rem;">
        <p class="modal_img flex1"></p>
        <p class="Bold font_s36 colorF textC flex2">浦东新区社会组织协同监管数据大平台信用标准</p>
        <p class="modal_img1 flex1"></p>
      </div>
      <div class="flex" style="padding-top: 1.9375rem;">
        <div class="flexC flex1 JustifyContentSB AlignItemsC" style="padding-top:3.5625rem;margin-right: -2.625rem;">
          <p class="credit_icon colorF Medium textC ">
            <span>A</span>
            <span style="writing-mode: vertical-lr">级</span>
          </p>
          <p class="credit_icon1 colorF Medium textC ">
            <span>B</span>
            <span style="writing-mode: vertical-lr">级</span>
          </p>
          <p class="credit_icon2 colorF Medium textC ">
            <span>C</span>
            <span style="writing-mode: vertical-lr">级</span>
          </p>
          <p class="credit_icon3 colorF Medium textC ">
            <span>D</span>
            <span style="writing-mode: vertical-lr">级</span>
          </p>
        </div>
        <div class="flexC flex5 JustifyContentSA">
          <ul class="flex credit_ul  AlignItemsC">
            <li class="flex1 Bold font_s18 colorF textC ">级</li>
            <li class="flex1 Bold font_s18 colorF textC">监管类型</li>
            <li class="flex4 Bold font_s18 colorF textC">信用评价指标</li>
            <li class="flex3 Bold font_s18 colorF textC">具体指标</li>
          </ul>
          <div style="margin: 0.46875rem 0rem;">
            <ul v-for="(item, index) in obj" class="flex credit_ul1  AlignItemsC" :key="'list' + index">
              <li class="flex1 Bold font_s16 colorF textC">{{ item.texta }}</li>
              <li class="flex1 Bold font_s16 colorF textC">{{ item.textb }}</li>
              <li class="flex4 Bold font_s16 colorF">{{ item.textc }}</li>
              <li class="flex3 Bold font_s16 colorF ">{{ item.textd }}</li>
            </ul>
          </div>
          <div style="margin:0.46875rem 0rem;">
            <ul v-for="(item, index) in obj1" class="flex credit_ul2  AlignItemsC" :key="'list' + index">
              <li class="flex1 Bold font_s16 colorF textC">{{ item.texta }}</li>
              <li class="flex1 Bold font_s16 colorF textC">{{ item.textb }}</li>
              <li class="flex4 Bold font_s16 colorF ">{{ item.textc }}</li>
              <li class="flex3 Bold font_s16 colorF ">{{ item.textd }}</li>
            </ul>
          </div>
          <div style="margin:0.46875rem 0rem;">
            <ul v-for="(item, index) in obj2" class="flex credit_ul1  AlignItemsC" :key="'list' + index">
              <li class="flex1 Bold font_s16 colorF textC">{{ item.texta }}</li>
              <li class="flex1 Bold font_s16 colorF textC">{{ item.textb }}</li>
              <li class="flex4 Bold font_s16 colorF">{{ item.textc }}</li>
              <li class="flex3 Bold font_s16 colorF "></li>
            </ul>
          </div>
          <div style="margin-top: 0.46875rem;">
            <ul class="flex credit_ul3  AlignItemsC">
              <li class="flex1 Bold font_s16 colorF textC">D级</li>
              <li class="flex1 Bold font_s16 colorF textC">信用监管</li>
              <li class="flex4 Bold font_s16 colorF">无人管理，没有活动，没有公信力</li>
              <li class="flex3 Bold font_s16 colorF ">由监察总队确认为名存实亡的，可直接进入该等级</li>
            </ul>
          </div>
        </div>
        <div class="flex1" style="margin: 0rem -4.5rem;"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

      obj: [
        {

          texta: 'AAA级',
          textb: '信用监管',
          textc: '管理规范，活动良好，社会影响正面，公信力高 ',
          textd: '规范化评估等级4A及以上或者荣获过省市级以上先进称号， 近五年没有失信行为且年检均为合格'
        },
        {
          texta: 'AA级',
          textb: '信用监管',
          textc: '管理规范，活动良好，社会影响正面，公信力高 ',
          textd: '规范化评估等级3A及以上，近五年没有失信行为且年检均 为合格'
        },
        {
          texta: 'A级',
          textb: '信用监管',
          textc: '管理规范，活动良好，社会影响正面，公信力高 ',
          textd: '近五年没有失信行为且年检均为合格'
        }
      ],
      obj1: [
        {

          texta: 'BBB级',
          textb: '信用监管',
          textc: '管理基本规范，活动基本正常，有一定的社会影响，公信力一般',
          textd: '近五年没有严重失信行为  '
        },
        {
          texta: 'BB级',
          textb: '信用监管',
          textc: '管理基本规范，活动基本正常，有一定的社会影响，公信力一般 ',
          textd: '近五年没有严重失信行为  '
        },
        {
          texta: 'B级',
          textb: '信用监管',
          textc: '管理基本规范，活动基本正常，有一定的社会影响，公信力一般',
          textd: '近五年没有严重失信行为  '
        }
      ],
      obj2: [
        {

          texta: 'CCC级',
          textb: '信用监管',
          textc: '管理不善，活动不正常，社会影响负面，公信力低 ',
          textd: ''
        },
        {
          texta: 'CC级',
          textb: '信用监管',
          textc: '管理不善，活动不正常，社会影响负面，公信力低 ',
          textd: ''
        },
        {
          texta: 'C级',
          textb: '信用监管',
          textc: '管理不善，活动不正常，社会影响负面，公信力低 ',
          textd: ''
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.CreditModel {
  width: 100%;
  height: 100%;

  .modal_img {
    height: 2.875rem;
    background: url(../../../assets/img/comprehensive/components/3.png) no-repeat;
    background-size: 100% 100%;
  }
  .modal_img1 {
    height: 2.875rem;
    background: url(../../../assets/img/comprehensive/components/4.png) no-repeat;
    background-size: 100% 100%;
  }
  .credit_icon,
  .credit_icon1,
  .credit_icon2,
  .credit_icon3 {
    width: 4.1875rem;
    height: 8.5625rem;
    line-height: 4.1875rem;
    font-size: 1.5625rem;
  }
  .credit_icon {
    background: url(../../../assets/img/comprehensive/components/11.png) no-repeat center;
    background-size: 100% 100%;
  }
  .credit_icon1 {
    background: url(../../../assets/img/comprehensive/components/12.png) no-repeat center;
    background-size: 100% 100%;
  }
  .credit_icon2 {
    background: url(../../../assets/img/comprehensive/components/13.png) no-repeat center;
    background-size: 100% 100%;
  }
  .credit_icon3 {
    background: url(../../../assets/img/comprehensive/components/14.png) no-repeat center;
    background-size: 100% 100%;
  }
  .credit_ul {
    height: 2.25rem;
    margin-bottom: 0.46875rem;
    background: url(../../../assets/img/comprehensive/components/7.png) no-repeat center;
    background-size: 100% 100%;
  }
  .credit_ul1,
  .credit_ul2 {
    height: 2.875rem;
    margin: 0.28125rem 0rem;
  }
  .credit_ul,
  .credit_ul1,
  .credit_ul2,
  .credit_ul3 {
    padding-right: 3.625rem;
  }

  .credit_ul1 {
    background: url(../../../assets/img/comprehensive/components/8.png) no-repeat center;
    background-size: 100% 100%;
  }

  .credit_ul2 {
    background: url(../../../assets/img/comprehensive/components/9.png) no-repeat center;
    background-size: 100% 100%;
  }

  .credit_ul3 {
    height: 9.375rem;
    background: url(../../../assets/img/comprehensive/components/10.png) no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
